<template>
	<view class="store-container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<uni-icons type="search" size="16" color="#999"></uni-icons>
				<input 
					v-model="searchKeyword" 
					placeholder="搜索商户名称或编码" 
					@input="onSearchInput"
					class="input-field"
				/>
			</view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" @click="showTypeFilter = !showTypeFilter">
				<text>商户类型</text>
				<uni-icons :type="showTypeFilter ? 'up' : 'down'" size="12" color="#666"></uni-icons>
			</view>
			<view class="filter-item" @click="showStatusFilter = !showStatusFilter">
				<text>状态</text>
				<uni-icons :type="showStatusFilter ? 'up' : 'down'" size="12" color="#666"></uni-icons>
			</view>
			<view class="filter-item" @click="showPatternFilter = !showPatternFilter">
				<text>营业模式</text>
				<uni-icons :type="showPatternFilter ? 'up' : 'down'" size="12" color="#666"></uni-icons>
			</view>
		</view>

		<!-- 筛选下拉菜单 -->
		<view class="filter-dropdowns">
			<!-- 商户类型筛选 -->
			<view v-if="showTypeFilter" class="filter-dropdown">
				<view 
					v-for="type in typeOptions" 
					:key="type.value"
					class="filter-option"
					:class="{ active: selectedType === type.value }"
					@click="selectType(type.value)"
				>
					{{ type.label }}
				</view>
			</view>

			<!-- 状态筛选 -->
			<view v-if="showStatusFilter" class="filter-dropdown">
				<view 
					v-for="status in statusOptions" 
					:key="status.value"
					class="filter-option"
					:class="{ active: selectedStatus === status.value }"
					@click="selectStatus(status.value)"
				>
					{{ status.label }}
				</view>
			</view>

			<!-- 营业模式筛选 -->
			<view v-if="showPatternFilter" class="filter-dropdown">
				<view 
					v-for="pattern in patternOptions" 
					:key="pattern.value"
					class="filter-option"
					:class="{ active: selectedPattern === pattern.value }"
					@click="selectPattern(pattern.value)"
				>
					{{ pattern.label }}
				</view>
			</view>
		</view>

		<!-- 商户列表 -->
		<view class="store-list">
			<view 
				v-for="store in storeList" 
				:key="store.id" 
				class="store-card"
				@click="viewStoreDetail(store)"
			>
				<!-- 商户Logo -->
				<view class="store-logo">
					<image 
						:src="store.logoUrl || '/static/default-store.png'" 
						mode="aspectFill"
						@error="onImageError"
						class="logo-image"
					/>
				</view>

				<!-- 商户信息 -->
				<view class="store-info">
					<view class="store-header">
						<text class="store-name">{{ store.name }}</text>
						<view class="store-status" :class="store.status === 1 ? 'active' : 'inactive'">
							{{ store.status === 1 ? '营业中' : '已停业' }}
						</view>
					</view>
					
					<view class="store-code">编码：{{ store.code }}</view>
					
					<view class="store-type">
						<text class="type-label">类型：</text>
						<text class="type-value">{{ getTypeLabel(store.type) }}</text>
					</view>
					
					<view class="store-contact">
						<text class="contact-label">联系人：</text>
						<text class="contact-value">{{ store.contactName }}</text>
					</view>
					
					<view class="store-phone">
						<text class="phone-label">电话：</text>
						<text class="phone-value">{{ store.contactPhone }}</text>
					</view>
					
					<view class="store-pattern">
						<text class="pattern-label">营业模式：</text>
						<text class="pattern-value">{{ getPatternLabel(store.businessPattern) }}</text>
					</view>
				</view>

				<!-- 操作按钮 -->
				<view class="store-actions">
					<view class="action-btn call-btn">
						<uni-icons type="phone" size="16" color="#fff"></uni-icons>
					</view>
					<view class="action-btn email-btn">
						<uni-icons type="email" size="16" color="#fff"></uni-icons>
					</view>
					<button class="action-btn select-btn" @click.stop="selectStore(store)">
						<uni-icons type="checkmarkempty" size="16" color="#fff"></uni-icons>
					</button>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view v-if="hasMore" class="load-more" @click="loadMore">
			<text v-if="loading">加载中...</text>
			<text v-else>点击加载更多</text>
		</view>

		<!-- 无数据提示 -->
		<view v-if="storeList.length === 0 && !loading" class="empty-state">
			<uni-icons type="shop" size="64" color="#ccc"></uni-icons>
			<text class="empty-text">暂无商户信息</text>
		</view>
	</view>
</template>

<script>
	import { get } from '@/utils/request.js'
	
	export default {
		data() {
			return {
				// 搜索相关
				searchKeyword: '',
				searchTimer: null,
				
				// 筛选相关
				showTypeFilter: false,
				showStatusFilter: false,
				showPatternFilter: false,
				selectedType: '',
				selectedStatus: '',
				selectedPattern: '',
				
				// 数据相关
				storeList: [],
				loading: false,
				hasMore: true,
				pageNum: 1,
				pageSize: 10,
				total: 0,
				
				// 选项配置
				typeOptions: [
					{ label: '全部', value: '' },
					{ label: '连锁超市', value: 1 },
					{ label: '便利店', value: 2 },
					{ label: '个体户', value: 3 }
				],
				statusOptions: [
					{ label: '全部', value: '' },
					{ label: '营业中', value: 1 },
					{ label: '已停业', value: 0 }
				],
				patternOptions: [
					{ label: '全部', value: '' },
					{ label: '统一时间', value: 1 },
					{ label: '周末延长', value: 2 },
					{ label: '周末高峰', value: 3 },
					{ label: '24小时营业', value: 4 }
				]
			}
		},
		onLoad() {
			this.loadStoreList()
		},
		onPullDownRefresh() {
			this.refreshList()
		},
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.loadMore()
			}
		},
		methods: {
			// 加载商户列表
			async loadStoreList(isRefresh = false) {
				if (this.loading) return
				
				this.loading = true
				
				try {
					const params = {
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}
					
					// 添加搜索条件
					if (this.searchKeyword) {
						params.name = this.searchKeyword
					}
					
					// 添加筛选条件
					if (this.selectedType !== '') {
						params.type = this.selectedType
					}
					if (this.selectedStatus !== '') {
						params.status = this.selectedStatus
					}
					if (this.selectedPattern !== '') {
						params.businessPattern = this.selectedPattern
					}
					
					const response = await get('/core/storeInfo/list', params)
					
					if (response.code === 200) {
						if (isRefresh) {
							this.storeList = response.rows || []
						} else {
							this.storeList = [...this.storeList, ...(response.rows || [])]
						}
						
						this.total = response.total || 0
						this.hasMore = this.storeList.length < this.total
					} else {
						uni.showToast({
							title: response.msg || '加载失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加载商户列表失败:', error)
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
					uni.stopPullDownRefresh()
				}
			},
			
			// 刷新列表
			refreshList() {
				this.pageNum = 1
				this.hasMore = true
				this.loadStoreList(true)
			},
			
			// 加载更多
			loadMore() {
				if (this.hasMore && !this.loading) {
					this.pageNum++
					this.loadStoreList()
				}
			},
			
			// 搜索输入
			onSearchInput() {
				// 防抖处理
				if (this.searchTimer) {
					clearTimeout(this.searchTimer)
				}
				
				this.searchTimer = setTimeout(() => {
					this.refreshList()
				}, 500)
			},
			
			// 选择商户类型
			selectType(value) {
				this.selectedType = value
				this.showTypeFilter = false
				this.refreshList()
			},
			
			// 选择状态
			selectStatus(value) {
				this.selectedStatus = value
				this.showStatusFilter = false
				this.refreshList()
			},
			
			// 选择营业模式
			selectPattern(value) {
				this.selectedPattern = value
				this.showPatternFilter = false
				this.refreshList()
			},
			
			// 获取商户类型标签
			getTypeLabel(type) {
				const typeMap = {
					1: '连锁超市',
					2: '便利店',
					3: '个体户'
				}
				return typeMap[type] || '未知'
			},
			
			// 获取营业模式标签
			getPatternLabel(pattern) {
				const patternMap = {
					1: '统一时间',
					2: '周末延长',
					3: '周末高峰',
					4: '24小时营业'
				}
				return patternMap[pattern] || '未知'
			},
			
			// 查看商户详情
			viewStoreDetail(store) {
				// 这里可以跳转到商户详情页面
				uni.showToast({
					title: `查看${store.name}详情`,
					icon: 'none'
				})
			},
			
			// 拨打电话
			callStore(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone,
						fail: () => {
							uni.showToast({
								title: '拨号失败',
								icon: 'none'
							})
						}
					})
				}
			},
			
			// 发送邮件
			emailStore(email) {
				if (email) {
					// 这里可以实现邮件功能，或者复制邮箱地址
					uni.setClipboardData({
						data: email,
						success: () => {
							uni.showToast({
								title: '邮箱已复制',
								icon: 'success'
							})
						}
					})
				}
			},
			
			// 选择商户
			selectStore(store) {
				try {
					// 将商户信息存储到Storage中
					uni.setStorageSync('selectedStore', store)
					
					// 显示成功提示
					uni.showToast({
						title: `已选择${store.name}`,
						icon: 'success',
						duration: 2000
					})
					
					// 可以在这里添加其他逻辑，比如跳转到其他页面
					console.log('已选择商户:', store)
					
				} catch (error) {
					console.error('存储商户信息失败:', error)
					uni.showToast({
						title: '选择失败，请重试',
						icon: 'none'
					})
				}
			},
			
			// 图片加载失败
			onImageError(e) {
				// 设置默认图片
				e.target.src = '/static/default-store.png'
			}
		}
	}
</script>

<style scoped>
	.store-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 搜索栏 */
	.search-bar {
		margin-bottom: 20rpx;
	}
	
	.search-input {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.input-field {
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
	}
	
	/* 筛选栏 */
	.filter-bar {
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.filter-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		font-size: 26rpx;
		color: #666;
		border-right: 1rpx solid #eee;
	}
	
	.filter-item:last-child {
		border-right: none;
	}
	
	.filter-item text {
		margin-right: 10rpx;
	}
	
	/* 筛选下拉菜单 */
	.filter-dropdowns {
		position: relative;
		margin-bottom: 20rpx;
	}
	
	.filter-dropdown {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
		z-index: 100;
		overflow: hidden;
	}
	
	.filter-option {
		padding: 25rpx 30rpx;
		font-size: 26rpx;
		color: #333;
		border-bottom: 1rpx solid #eee;
	}
	
	.filter-option:last-child {
		border-bottom: none;
	}
	
	.filter-option.active {
		background-color: #007aff;
		color: #fff;
	}
	
	/* 商户列表 */
	.store-list {
		margin-bottom: 20rpx;
	}
	
	.store-card {
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		position: relative;
	}
	
	.store-logo {
		margin-right: 30rpx;
	}
	
	.logo-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		background-color: #f0f0f0;
	}
	
	.store-info {
		flex: 1;
	}
	
	.store-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}
	
	.store-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
	}
	
	.store-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		margin-left: 20rpx;
	}
	
	.store-status.active {
		background-color: #e8f5e8;
		color: #52c41a;
	}
	
	.store-status.inactive {
		background-color: #fff2f0;
		color: #ff4d4f;
	}
	
	.store-code {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
	
	.store-type,
	.store-contact,
	.store-phone,
	.store-pattern {
		display: flex;
		font-size: 26rpx;
		margin-bottom: 8rpx;
	}
	
	.type-label,
	.contact-label,
	.phone-label,
	.pattern-label {
		color: #999;
		width: 140rpx;
	}
	
	.type-value,
	.contact-value,
	.phone-value,
	.pattern-value {
		color: #333;
		flex: 1;
	}
	
	/* 操作按钮 */
	.store-actions {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 20rpx;
	}
	
	.action-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15rpx;
	}
	
	.call-btn {
		background-color: #52c41a;
	}
	
	.email-btn {
		background-color: #1890ff;
	}
	
	.select-btn {
		background-color: #ff6b35;
	}
	
	/* 加载更多 */
	.load-more {
		text-align: center;
		padding: 30rpx;
		color: #666;
		font-size: 28rpx;
	}
	
	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}
	
	.empty-text {
		margin-top: 30rpx;
		color: #999;
		font-size: 28rpx;
	}
</style> 